<!-- vip特权首页 -->
<template>
    <div class="guide">
        <div class="container">
            <div class="flex header-container">
                <img class="user-picture" :src="userInfo.user_picture" />
                <div class="flex flex-v">
                    <span>hi~！{{ userInfo.nick_name }}</span>
                    <span class="desc" v-if="!isVip">
                        开通VIP会员至尊版，即
                        <span class="yellow">享尊贵特权</span>
                    </span>
                    <span class="desc" v-else>
                        {{ expire_time }}日到期，请及时
                        <span class="yellow">续费</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="card-container">
            <div  class="company-vip-card-bg">
                <div class="price">
                    <span class="units">¥</span>
                    <span class="val">{{ roleType ? personPrice : companyPrice }}</span>
                    <span class="time">/年</span>
                    <span class="original_price">原价:<span class="s">¥{{original_price}}</span></span>
                </div>
            	<div class="btn" @click="purchase">{{isVip ? "立即续费" : "立即开通"}}</div>
            </div>
        </div>
        <div class="desc-container">
            <img :src="imgUrl + 'vip/hkds/content_pic1.png'" style="height:307rpx" />
            <img :src="imgUrl + 'vip/hkds/content_pic2.png'" style="height:761rpx" />
            <img :src="imgUrl + 'vip/hkds/content_pic3.png'" style="height:660rpx" />
            <img :src="imgUrl + 'vip/hkds/explain.png'" style="height:889rpx"/>
        </div>
        <div class="btn-container">
            <div class="buy">
                <span class="price">
                    <em class="unit">￥</em>
                     {{ roleType ? personPrice : companyPrice }}
                    <img :src="imgUrl + '/vip/hkds/time.png'" />
                </span>
                <span class="cost-price">原价<span class="s">¥{{original_price}}</span></span>
            </div>
            <div class="btn" @click="purchase" >{{ isVip ? "立即续费" : "立即开通"}}</div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { isPersonRoleType, getFormatDate } from '@/utils/common'
import { getvippay } from '@/api/payment'
import { getvip } from '@/api/vip'
import { getUser } from '@/utils/auth'
import qs from 'qs'

export default {
	name: 'VipGuide',
	data() {
		return {
			title: '会员特权',
			expire_time: '',
			vipInfo: '',
			constant: this.$constant,
			imgUrl: this.$constant.imgUrl,
			scroll_data: [
				{
					picture: 'https://www.meijiabang.com/storage/hkds/uploads/20190530/131_5cef331d80bf1.png',
					hour: 5,
					mobile: '18039834849',
					reason: '开通会员'
				},
				{
					picture: 'https://www.meijiabang.com/storage/hkds/uploads/20190530/131_5cef331d80bf1.png',
					hour: 5,
					mobile: '18039834849',
					reason: '开通会员'
				},
				{
					picture: 'https://www.meijiabang.com/storage/hkds/uploads/20190530/131_5cef331d80bf1.png',
					hour: 5,
					mobile: '18039834849',
					reason: '开通会员'
				},
				{
					picture: 'https://www.meijiabang.com/storage/hkds/uploads/20190530/131_5cef331d80bf1.png',
					hour: 5,
					mobile: '151****1234',
					reason: '开通会员'
				}
			]
			// ,
			// scroll_option: {
			// 	step: 1,
			// 	limitMoveNum: 1,
			// 	openTouch: false,
			// 	waitTime: 100,
			// 	direction: 1,
			// 	hoverStop: true,
			// 	isSingleRemUnit: true,
			// 	switchDelay: 1000,
			// 	singleWidth: 2
			// }
		}
	},
	filters: {
		formatMobile(mobile) {
			return `${mobile.substr(0, 3)}****${mobile.substr(7)}`
		}
	},

	computed: {
		...mapGetters({ 'userInfo': 'getUser' }),
		...mapGetters(['allConfig']),
		roleType() {
			return isPersonRoleType(this.userInfo.role_id)
		},
		isVip() {
			return this.userInfo.vip_level > 0
		},
		companyPrice() {
			return this.allConfig.config ? this.allConfig.config.hkds_vip_price_config.company.price : 0
		},
		personPrice() {
			return this.allConfig.config ? this.allConfig.config.hkds_vip_price_config.personal.price : 0
		},
		original_price() {
		    let POriginal_price = this.allConfig.config ? this.allConfig.config.hkds_vip_price_config.personal.original_price : 0
		    let cOriginal_price = this.allConfig.config ? this.allConfig.config.hkds_vip_price_config.company.original_price : 0
		    return this.roleType ? POriginal_price : cOriginal_price
		}
	},

	onLoad() {
		this.getvipmsg()
		getUser(true)
	},

	methods: {
		getvipmsg() {
			getvip().then(res => {
				const data = res.data
				this.expire_time = data.vipInfo && getFormatDate(data.vipInfo.expire_time, 'yyyy-MM-dd')
				this.vipInfo = data.vipInfo
			})
		},
		// 跳转到查看全部权益页
		jumpToAllRightsPage() {
			uni.navigateTo({
				url: `/pages/admin/vip/allRight`
			})
		},
		// 跳转到邀请开通vip会员页
		jumpToInviteAwardPage() {
			// this.$router.push({
			// 	name: 'InviteAward',
			// 	query: {
			// 		owner_user_id: this.owner_user_id
			// 	}
			// })
		},
		purchase() {
			const params = {
				roleType: this.roleType ? 1 : 0,
				isVip: this.isVip
			}
			uni.navigateTo({
				url: `/pages/admin/vip/purchaseVip?${qs.stringify(params)}`
			})
		}
	}
}
</script>
<style lang='scss' scoped>
@import '~@/uni.scss';
scroll-view {
    height: 50px;
}
.swiper{
    width: 398px;
    height: 50px;
    margin: 0 auto;
    swiper-item {
        height: 100%;
    }
}
.guide {
    width: 750px;
    background: #fff;
    padding-bottom: 100px;
    margin:0 auto;
    .container {
        background: #ffffff;
        background-image: url($imgUrl + 'vip/guide-bg.png');
        background-size: 100% 368px;
        background-repeat: no-repeat;
        width: 750px;
        height: 368px;
        .header-container {
            padding-top: 40px;
            .user-picture {
                width: 94px;
                height: 94px;
                border-radius: 50%;
                margin: 0 40px;
            }
            span {
                color: #ffffff;
                font-size: 30px;
                line-height: 24px;
                margin-top: 10px;
            }
            .desc {
                margin-top: 20px;
                color: #999999;
                font-size: 24px;
                line-height: 24px;
                .yellow {
                    color:  #d8bd85;;
                    font-size: 24px;
                }
            }
        }
    }
    .card-container {
        position: relative;
        width: 100%;
        height:193px ;
        margin:0 auto;
        .company-vip-card-bg{
            position: absolute;
            z-index: 9;
            top:-224px;
            left:0;
            right:0;
            width: 670px;
            height: 425px;
            margin: 0 auto;
            background-image: url($imgUrl + 'vip/hkds/member.png?t=1');
            background-size: 670px 351px;
            background-repeat: no-repeat;
            .price{
                margin-top: 139px;
                color:#FE392F;
                text-align: center;
                position: relative;
                .units{
                    font-size: 39px;
                    font-weight: bold;
                }
                .val{
                    font-size: 54px;
                    font-weight: bold;
                }
                .time{
                    font-size: 31px;
                }
                .original_price{
                    position: absolute;
                    top:-18px;
                    left:50%;
                    margin-left:115px;
                    width:154px;
                    height:40px;
                    line-height:40px;
                    text-align:center;
                    color: #fff;
                    background:rgba(48,48,48,1);
                    font-size:24px;
                    border-radius:20px 20px 20px 4px;
                    .s{
                        display:inline;
                        text-decoration: line-through;
                    }
                }
            }
            .btn{
                width:505px;
                height:131px;
                line-height: 118px;
                text-align:center;
                font-size:36px;
                color:#fff;
                margin:60px auto 0;
                background-image: url($imgUrl + 'vip/hkds/btn_bg.png');
                background-size: 505px 131px;
                background-repeat: no-repeat;
            }
        }
    }
    .desc-container {
        background: #ffffff;
        margin-bottom: 100rpx;
        img{
            width:100%;
        }
    }
    .btn-container {
        background: #ffffff;
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        text-align: left;
        width: 100%;
        height: 100px;
        background-color: #333333;
        box-shadow: #c2c2c2 0px -1px 10px 0px;
        font-size: 36px;
        word-spacing: 0.7px;
        color: #ffffff;
        .buy{
            float:left;
            width: 421px;
            padding-left:30px;
            padding-top: 18px;
            .price{
                display:block;
                font-size:36px;
                line-height:40px;
                .unit{
                    float: left;
                    font-style: normal;
                    margin-right: 0;
                    font-size: 24px;
                }
            }
            .cost-price{
                display:block;
                margin-top:9px;
                font-size: 22px;
                line-height:24px;
                color: #ccc;
                .s{
                    display:inline;
                    text-decoration: line-through;
                }
            }
            img{
                width: 218px;
                height:30px;
            }
        }
        .btn{
            float:right;
            color:#333;
            width:298px;
            height: 100px;
            line-height:100px;
            text-align:center;
            background-image: url($imgUrl + 'vip/hkds/btn_bottom_bg.png');
            background-size: 299px 100px;
            background-repeat: no-repeat;
        }
    }
}
</style>
